import React, { Component } from 'react'
import { Icon, Dropdown, Menu } from 'antd'
import { withRouter } from 'react-router-dom'
import { getUser } from '../utils/tools'

class HeaderNav extends Component {
    constructor(props) {
        super(props)
        this.state = {
            user: getUser()
        }
    }

    render() {
        const menu = (
            <Menu>
                <Menu.Item key="0">
                    <b onClick={this.logOut.bind(this)}>退出</b>
                </Menu.Item>
            </Menu>
        )
        return (
            <nav className="d-flex justify-content-between align-items-center dz-nav">
                {/* <img src={logo} alt="logo" /> */}
                <h2 onClick={this.toIndex.bind(this)}>川威云监控系统后台管理</h2>
                <div className="d-flex justify-content-between align-items-center " style={{ minWidth: '100px' }}>
                    <div><Icon type="user" /><b className="user-name">{this.state.user.name}</b></div>
                    <Dropdown overlay={menu} trigger={['click']}>
                        <Icon type="poweroff" style={{ cursor: 'pointer' }} />
                    </Dropdown>
                </div>
            </nav>
        );
    }

    logOut() {
        this.props.history.push('/login')
        localStorage.clear()
    }

    toIndex() {
        this.props.history.push('/main/home')
    }
}

export default withRouter(HeaderNav);